<template>
    <section class="info">
        <div class="search">
            <asn-card>
                <search ref="search" @getItems="getItems" />
            </asn-card>
        </div>
        <div class="content">
            <asn-card>
                <div style="display: flex;">
                    <asn-button name="新增资源" icon="add" size="small" @click="addItem" />
                </div>
                <Table :items="items">
                    <template #option="{ row }">
                        <div class="option">
                            <div>
                                <asn-button name="编辑" icon="edit" size="mini" @click="editItem(row)" />
                            </div>
                            <div>
                                <asn-button name="删除" icon="delete" size="mini" @click="deletedItem(row.id)" />
                            </div>
                        </div>
                    </template>
                </Table>
            </asn-card>
        </div>

        <asn-dialog ref="addDialog" title="新增资源" types="add" @added="refresh">
            <template #add="{ item }">
                <resource-form :item="item" />
            </template>
        </asn-dialog>

        <asn-dialog ref="editDialog" title="修改资源" types="edit" @edited="refresh">
            <template #edit="{ item }">
                <resource-form :item="item" />
            </template>
        </asn-dialog>
    </section>
</template>

<script>
import _api from '@/common/api/resource'
import search from './components/search.vue'
import resourceForm from './components/resourceForm.vue'
import Table from './components/Table.vue'
export default {
    components: { search, resourceForm, Table },
    data() {
        return {
            items: []
        }
    },
    methods: {
        addItem() {
            this.$refs.addDialog.showDialog(_api)
        },
        editItem(row) {
            const data = Object.assign({}, {
                id: row.id,
                name: row.name,
                rate: row.rate,
                picture: row.picture,
                tag_id: row.tag_id,
                remark: row.remark,
            })
            this.$refs.editDialog.showDialog(_api, data)
        },

        deletedItem(id) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _api.deleteAsyncList(id).then(res => {
                    this.$notify.success({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.refresh()
                })
            }).catch(() => {
                this.$notify({
                    type: 'info',
                    message: '已取消删除'
                });
            }).finally(() => {
                this.refresh()
            })
        },

        getItems(items) {
            this.items = items
        },

        refresh() {
            this.$refs.search.getItems()
        }
    }

}
</script>

<style lang="scss" scoped>
.info {
    .search {
        padding: 5px 0;
    }

    .content {
        padding: 5px 0;
    }

    .option {
        display: flex;
        justify-content: center;

        div {
            margin-right: 5px;
        }
    }
}
</style>